<template>
    <div v-if="subject" class="answers-container">
      <div class="crumbs">
        <crumb />
      </div>
      <answer-panel-for-oral
        :subject-detail="subject"
        :training-id="trainingId"
        :stu-task-caseId="stuMTaskCaseId"
        :stu-node-caseId="stuMNodeCaseId"
        :training-name="trainingName"
        v-if="subjectType == 3"></answer-panel-for-oral>
      <answer-panel v-else
                    :training-id="trainingId"
                    :stu-task-case-id="stuMTaskCaseId"
                    :stu-node-case-id="stuMNodeCaseId"
                    :training-name="trainingName"
                    :subject-detail="subject"></answer-panel>
    </div>
</template>

<script>
import answerPanel from './components/answer/answerPanel'
import answerPanelForOral from './components/answer/answerPanelForOral'
import { getSubjectInfo, getOralSubjectInfo } from '@/api/student/training/multiple'
export default {
  name: 'answer',
  data () {
    return {
      trainingId: null,
      stuMTaskCaseId: null,
      stuMNodeCaseId: null,
      subjectType: null,
      trainingName: null,
      subject: null
    }
  },
  methods: {
    async subjectDetail () {
      const res = await getSubjectInfo({
        trainingId: this.trainingId,
        stuMTaskCaseId: this.stuMTaskCaseId,
        stuMNodeCaseId: this.stuMNodeCaseId
      })
      if (!res) return
      this.subject = res
    },
    async subjectDetail4Oral () {
      const res = await getOralSubjectInfo({
        trainingId: this.trainingId,
        stuMTaskCaseId: this.stuMTaskCaseId,
        stuMNodeCaseId: this.stuMNodeCaseId
      })
      if (!res) return
      this.subject = res
    }
  },
  created () {
    this.trainingId = this.$route.query.trainingId
    this.stuMTaskCaseId = this.$route.query.stuMTaskCaseId
    this.stuMNodeCaseId = this.$route.query.stuMNodeCaseId
    this.subjectType = this.$route.query.subjectType
    this.trainingName = this.$route.query.trainingName
    if (parseInt(this.subjectType) === 3) this.subjectDetail4Oral()
    else this.subjectDetail()
  },
  components: {
    answerPanel,
    answerPanelForOral
  }
}
</script>

<style scoped lang="scss">
.answers-container{
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  .crumbs{
    width: 1200px;
  }
}

</style>
